<template lang="jade">
  div.workout_selected
    div.workout_header.weui_panel
      div.weui_media_box
        h4 总课时{{program.workouts.length}}节
        span(v-for="(key, value, index) in typeCount")  {{value}} {{key}}节
    div.workout_list_panel.weui_media_box
      div.workout_list
        div.weui_cell(v-for="(item, index) in program.workouts", v-bind:key="index")
          div.workout(v-bind:class="[item.type === 'PT' ? 'PT_workout' : 'VPT_workout', index == selectId ? 'item_selected' : '']")
            div.left_text(@click="selectWorkout(index, $event)") 
              span {{index + 1}}: {{item.name}}
            div.right_btns(v-show="selectId === index")
              span(@click="moveUpItem")
                i.fa.fa-arrow-up
              span(@click="moveDownItem")
                i.fa.fa-arrow-down
              span(@click="deleteItem")
                i.fa.fa-trash
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  methods: {
    selectWorkout (index, event) {
      this.selectId = index;
    },

    moveUpItem () {
      if(this.selectId !== null && this.selectId > 0) {
        this.exchangeItem(this.selectId, this.selectId - 1);
        this.selectId--;
      }
    },

    moveDownItem () {
      if(this.selectId !== null && this.selectId < (this.program.workouts.length - 1)) {
        this.exchangeItem(this.selectId, this.selectId + 1);
        this.selectId++;
      }
    },

    deleteItem () {
      if(this.selectId !== null) {
        this.program.workouts.splice(this.selectId, 1);
        this.selectId = null;
      }
    },

    exchangeItem (itemId1, itemId2) {
      let firstId = Math.min(itemId1, itemId2);
      let secondId = Math.max(itemId1, itemId2);

      let firstItem = this.program.workouts.splice(firstId, 1);
      this.program.workouts.splice(secondId, 0, firstItem[0]);
    }
  },
  computed: {
    typeCount: function() {
      let typeCount = {}
      this.program.workouts.map(item => {
        typeCount[item.type] = typeCount[item.type] || 0;
        typeCount[item.type]++;
      })
      return typeCount;
    },
    program: {
      get: function() {
        return this.$store.state.program;
      },
      set: function(val, olfVal) {
        console.log('#program-candidates watched')
        this.$store.commit('UPDATE', {
          key: 'program',
          value: val
        })
      }
    }
  },
  props: [],
  watch: {},
  components: { },
  events: {},
  data() {
    return {
      selectId: null
    }
  },
  mounted() {}
}
</script>
<style scoped>
.workout_selected .weui_panel {
  background-color: transparent;
}

.workout_header {
  /* height: 20%; */
}

.workout_list_panel {
  height: 80%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.workout_list_panel .weui_cell {
  padding-left: 0;
  padding-right: 0;
}

.workout_selected {
  width: 100%;
  height: 100%;
}

.op_btn span {
  margin-left: 1rem;
}

.item_selected {
  border: solid 1px #000;
}

.workout_list .workout {
  width: 100%;
  padding: 2px 2px 2px 6px;
  color: #fff;
  border-radius: 5px;
}

.workout_list .weui_cell::before {
  border: none;
}

.PT_workout {
  background-color: #04be02;
}

.VPT_workout {
  background-color: #1bb1de;
}

.left_text {
  display: inline-block;
  width: 70%;
}

.right_btns {
  display: inline-block;
  width: 30%;
}

.right_btns span {
  padding: 0 5px;
}

.flip-list-move {
  transition: transform 1s;
}
</style>
